* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-color: #000002;
}

.header {
    text-align: center;
    margin: 268px auto auto auto;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 1px;
    max-width: 700px;
    padding:0px 20px;
}

.header .header-heading {
    font-size: 20px;
    margin-bottom: 0;
    color:#9B825E;
    font-weight:600;
}

.header .header-text {
    font-size: 16px;
    color:white;
    text-align: justify;
}

.header .header-img {
    width: 630px;
    margin: 25px auto 40px auto;
    padding: 0px 40px;
}

#readMore {
    display: none;
}

.hidden-content {
    display: none;
}

.read-more-button,
.read-less-button {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    background-color: transparent;
    border:none;
    color:#9B825E;
    cursor: pointer;
    padding:0;
    font-weight: 700;
    font-size: 18px;
}

.read-more-button:focus,
.read-less-button:focus {
    outline:none;
    color:#9B825E;
}

.btn {
    padding: 8px 70px;
    border-color: #9B825E;
    color: #9B825E;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: bolder;
    border-radius: 0px;
    margin-bottom: 30px;
}

.slideshow-container .rings-slides button,
.slideshow-container .necklaces-slides button,
.slideshow-container .earings-slides button  {
    transition: .5s;
    background: linear-gradient(#9B825E,#9B825E);
    background-size: 0% 7%;
    background-repeat: no-repeat;
    background-position: bottom;
    color: #9B825E;
    border-color: #9B825E;
}

.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    background-color: transparent;
    border-color: #9B825E;
    color: #9B825E;
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: none;
}

.divider {
    text-align: center;
    margin: 100px auto 115px auto;
    background-image: url(../Media/whole_screen_curveV3.png);
    background-size: cover;
    height: 38px;
    width: 100%;
    background-position: center;
}

#btn-back-to-top {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 50px; 
    z-index: 99; 
    border: 2px solid #9B825E; 
    border-color: #9B825E;
    outline: none; 
    background-color: #000002; 
    color: #9B825E; 
    cursor: pointer;
    padding: 10px; 
    font-size: 16px;
    border-radius: 50%;
    height: 45px;
    width: 45px;
}

/*.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #9B825E;
    border-color: #9B825E;
}

.btn-outline-primary.focus, 
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
    outline: #9B825E;
}*/

#btn-back-to-top:hover {
    background-color: #9B825E;
    border-color: #9B825E;
    color: white;
    outline: none;
}

#btn-back-to-top:after {
    outline: none;
    background-color: #9B825E;
    border-color: #9B825E;
    color: white;
}

#top-heading {
    color: #9B825E;
    font-family: 'Raleway', sans-serif;;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: bolder;
    text-align: center;
    margin-top: 140px;
}

#rings-decoration,
#earings-decoration,
#necklaces-decoration {
    height: 35px;
    width: auto;
    margin-bottom: 105px;
}

#overview-decoration {
    height: 35px;
    width: auto;
    margin-bottom: 64px;
}

#heading {
    color: #9B825E;
    font-family: 'Raleway', sans-serif;;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: bolder;
    text-align: center;
    position: relative;
}

.carousel-caption {
    padding-top: 0;
    padding-bottom: 0;
}

.carousel-inner .img-fluid {
    max-height: 700px;
}

#curve-div {
    justify-content: center;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 150px;
    margin-top: 70px;
}

#thin-separator {
    color: #000002;
    background-color: #9B825E;
    max-width: 50vw;
    margin-top: 150px;
    margin-bottom: 150px;
    margin-left: auto;
    margin-right: auto;
}

.rings-slider-wrapper {
    height:100px;
}

.rings-slider {
    position: relative;
    height: 100px;
}

.slick-slider .slick-track, .slick-slider .slick-list {
    padding:0 2px!important;
}

.slick-next:before {
    content: '\276D' !important;
}

.slick-prev:before {
    content: '\276C' !important;
}

.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 28px !important;
    color: #9B825E !important;
}

.slideshow-container {
    max-width: 700px;
    position: relative;
    margin: auto;
}

#slide-image {
    max-height: 700px;
}
  
.rings-slides,
.necklaces-slides,
.earings-slides {
    text-align: center;
}

.necklaces-slider-wrapper,
.earings-slider-wrapper {
    display: flex;
    justify-content: center;
}

.necklaces-slider,
.earings-slider {
    width:310px;
}

.rings-slider-wrapper,
.necklaces-slider-wrapper,
.earings-slider-wrapper {
    margin:80px auto;
}

.slick-slider img,
.necklaces-slider img,
.earings-slider img {
    height:200px;
    margin: auto;
}


#explore-button {
    padding: 8px 70px;
    border-color: #9B825E;
    color: #9B825E;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: bolder;
    border-radius: 0px;
    margin-bottom: 30px;
}

/*#explore-button:hover {
    background-color: #9B825E;
    border-color: #9B825E;
    color:white;
}*/

.carousel.dragging {
    cursor: grab;
    scroll-behavior: auto;
}

.carousel.dragging img {
    pointer-events: none;
}


.carousel-indicators img {
    height: 150px;
    width: auto;
    object-fit: cover; 
}

.wrapper {
    max-width: 700px;
    position: relative; 
    margin: auto;
    }

.carousel img:first-child {
    margin-left: 0px;
}

.wrapper span:first-child {
    left: -55px;
}

.wrapper span:last-child {
    right: -55px;
    text-align: end;
}

.wrapper span {
    position: absolute;
    cursor: pointer;
    width: 40px;
    height: fit-content;
    margin-top: -135px;
}

#img-div {
    text-align: center;
    margin-bottom: 30px;
}


#arrows-div {
    justify-content: center;
    display: flex;
    margin-top: 0px;
    margin-bottom: 150px;
}

.fade {
    animation-name: fade;
    animation-duration: 1s;
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
    }

/*new v2*/

.carousel .carousel-control-next,
.carousel .carousel-control-prev  {  
    background-color: transparent; 
    border: 0ch;
    opacity: 1;
}

a:hover {
    text-decoration: none;
}

.btn {
    padding: 8px 70px;
    border-color: #9B825E;
    color: #9B825E;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: bolder;
    border-radius: 0px;
}

/*.btn:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #9B825E;
    border-color: #9B825E;
}*/

#necklaces-carousel,
#earings-carousel {
    text-align: center;
    max-width: 100%;
    max-height: 700px;
    display: block;
    margin: auto;
    position: relative;
    margin-bottom: 470px;
}

#designProcessCarouselIndicators li {
    width:auto;
    background-color: transparent;
    bottom: -30px;
    text-indent: 0;
    color:#9B825E;
    font-size: 22px;
}

#designProcessCarouselIndicators li:hover,
.wrapper img:hover {
    transform: scale(1.2);
    transition: .5s ease;
    cursor: pointer;
}

#designProcessCarouselIndicators .active {
    width: auto;
    background-color: transparent;
    bottom: -30px;
    font-size: 22px;
    color: white;
}

.carousel-indicators {
    position: absolute;
    z-index: 15;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    list-style: none;
    bottom: -100px;
    margin-left:0;
    margin-right:0;
}


.carousel-fade .carousel-inner .carousel-item {
    -webkit-transition-property: opacity ;
    transition-property: opacity;
    transition: opacity ease-out .9s;
}
  
.carousel-fade .carousel-inner .active.carousel-item-left, 
.carousel-fade .carousel-inner .active.carousel-item-right, 
.carousel-fade .carousel-inner .carousel-item {
    opacity: 0;
}
  
.carousel-fade .carousel-inner .active, 
.carousel-fade .carousel-inner .carousel-item-next.carousel-item-left, 
.carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
    opacity: 1;
}
  
.carousel-fade .carousel-inner .active.carousel-item-left, 
.carousel-fade .carousel-inner .active.carousel-item-right, 
.carousel-fade .carousel-inner .carousel-item-next, 
.carousel-fade .carousel-inner .carousel-item-prev {
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}

.wrapper {
    max-width: 1100px;
    width: 100%;
    position: relative;
    margin-top: 50px;
  }

  .wrapper .carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 4));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .wrapper .carousel::-webkit-scrollbar {
    display: none;
  }
  .wrapper .carousel.no-transition {
    scroll-behavior: auto;
  }

  .wrapper .carousel.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
  .wrapper .carousel.dragging .card {
    cursor: grab;
    user-select: none;
  }
  .wrapper .carousel :where(.card, .img) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrapper .carousel .card {
    scroll-snap-align: start;
    height: 150px;
    width:150px;
    list-style: none;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
  }

  .wrapper .card .img img {
    width: 140px;
    height: 140px;
    object-fit: cover;
  }

.description-text {
    margin: 100px auto 115px auto;
    max-width: 700px;
}

.description-text p {
    text-align: center;
    color: #9B825E;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: lighter;
    margin-bottom: 0px;
    font-style: italic;
    padding:0 20px;
}

#btn-back-to-top {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 50px; 
    z-index: 99; 
    border: 2px solid #9B825E; 
    border-color: #9B825E;
    outline: none; 
    background-color: #000002; 
    color: #9B825E; 
    cursor: pointer;
    padding: 10px; 
    font-size: 16px;
    border-radius: 50%;
    height: 45px;
    width: 45px;
}

#btn-back-to-top:hover {
    background-color: #9B825E;
    border-color: #9B825E;
    color: white;
    outline: none;
}

#btn-back-to-top:after {
    outline: none;
    background-color: #9B825E;
    border-color: #9B825E;
    color: white;
}

@media screen and (min-width: 2159px) {

    body #text,
    .header .header-text {
        font-size: 20px;
    }

    body #top-heading,
    body #heading,
    .header .header-heading,
    .description-text p {
        font-size: 24px;
    }

    body #earings-decoration,
    body #necklaces-decoration,
    body #overview-decoration {
        height: 40px;
        width: auto;
    }

    body #description-text {
        font-size: 20px;
    }

    .header {
        margin: 323px auto auto auto;
    }

    body #btn-back-to-top {
        border: 3px solid #9B825E; 
        font-size: 18px;
        height: 52px;
        width: 52px;
    }

    .divider {
        height: 50px;
    }

    .read-more-button,
    .read-less-button {
        font-size: 22px;
    }
}

@media screen and (max-width: 992px) {

    #heading-decoration {
        margin-top: 0px;
    }

    .slick-slider img,
    .necklaces-slider img,
    .earings-slider img {
        height:150px;
        margin: auto;
    }

    .header {
        margin:70px auto auto auto;
    }

    #btn-back-to-top {
        display: none; 
    }

    body #top-heading {
        margin-top: 100px;
    }

    .wrapper .carousel {
        max-width: 700px;
        grid-auto-columns: calc((100% / 4));
    }

    .rings-slider-wrapper {
        height: 150px;
    }

    .rings-slider-wrapper .rings-slider .slick-next,
    .necklaces-slider-wrapper .necklaces-slider .slick-next,
    .earings-slider-wrapper .earings-slider .slick-next {
        margin:0 auto;
        left: 0;
        right: 0;
        transform: translateX(50px) translateY(95px);
        height:35px;
    }

    .rings-slider-wrapper .rings-slider .slick-prev,
    .necklaces-slider-wrapper .necklaces-slider .slick-prev,
    .earings-slider-wrapper .earings-slider .slick-prev {
        margin:0 auto;
        left: 0;
        right: 0;
        transform: translateX(-50px) translateY(95px);
        height:35px;
    }
    
}

@media screen and (max-width: 782px) {
    body .wrapper span {
      position: relative;
      margin-top: 0;
    }
    
    body #thin-separator {
        max-width: 70vw;
    }
}

@media screen and (max-width: 700px) {
    .wrapper .carousel {
        max-width: 700px;
        grid-auto-columns: calc((100% / 4));
    }

    .wrapper .carousel .card {
        width: 190px;
    }
}
  
  @media screen and (max-width: 520px) {
  
    body #indicators-img,
    body .carousel-indicators img {
      height: 140px
    }

    body #slide-image,
    body .carousel-inner .img-fluid {
        max-height: 500px;
    }

    body .carousel-inner {
        left: 0;
        right: 0;
        margin: auto;
    }

    body #designProcessCarousel,
    body #necklaces-carousel,
    body #earings-carousel {
        margin-bottom: 400px;
    }

    .wrapper .carousel {
        max-width: fit-content;
        grid-auto-columns: calc((100% / 3) - 20px);
    }

    .divider {
        margin:60px auto 70px auto;
        height: 32px;
    }

    .description-text {
        margin: auto auto 80px auto;
    }

    .header .header-img {
        padding: 0px 15px;
    }
  }

@media screen and (max-width: 330px) {
    .wrapper .carousel {
        grid-auto-columns: calc((100% / 2) - 20px);
    }

    .necklaces-slider,
    .earings-slider {
        width:270px;
    }
}


@media (hover: hover) {
    .slideshow-container .rings-slides button:hover,
    .slideshow-container .necklaces-slides button:hover,
    .slideshow-container .earings-slides button:hover {
        background-size: 100% 7%;
    }
}